import React from 'react';
import style from './style'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as okrAction from '../actions/okr.action'
import util from '../util'
import {Button} from 'sq-ui'
import { success, Checkbox } from '../ui-components'

@connect(({okr}) => ({okr}), dispatch => ({actions: bindActionCreators( {...okrAction} , dispatch)}))
class RemindSettings extends React.Component {
  constructor(props) {
    super(props);
    this.displayName = 'RemindSettings';
    let {
      remind
    } = props.okr;
    // if(!remind) remind = [{frequency:0},{frequency:0},{frequency:0},{frequency:0},{frequency:0}];
    if(!remind) remind = [{frequency:0},{frequency:0},{frequency:0}];
    this.state = {
      remind1: remind[0],
      remind2: remind[1],
      remind3: remind[2],
      // remind4: remind[3],
      // remind5: remind[4],
    }
  }
  componentDidMount() {
    this.props.actions.fetchObjectivRemind();
  }
  componentWillReceiveProps(nextProps) {
    const {
      remind: nextRemind
    } = nextProps.okr;
    const {
      remind
    } = this.props.okr;
    if(!!nextRemind && !util.isShallowEqual(remind, nextRemind)){
      this.setState({
        remind1: nextRemind[0],
        remind2: nextRemind[1],
        remind3: nextRemind[2],
        // remind4: nextRemind[3],
        // remind5: nextRemind[4],
      });
    }
  }
  onFieldChange = (name, value) => {
    // if(name === "remind4" || name === "remind5"){
    //   value = value.toString();
    // }
    if(value.match(/^[0-9]*$/)){
      this.setState({
        [name]: {
          ...this.state[name],
          frequency: value,
        },
      });
    }
  }
  // onSubmit = () => {
  //   const {
  //     remind1,
  //     remind2,
  //     remind3,
  //     remind4,
  //     remind5
  //   } = this.state;
  //   this.props.actions.updateObjectivRemind([
  //     {remindType: remind1.remindType, frequency: remind1.frequency}, 
  //     {remindType: remind2.remindType, frequency: remind2.frequency}, 
  //     {remindType: remind3.remindType, frequency: remind3.frequency}, 
  //     {remindType: remind4.remindType, frequency: +remind4.frequency}, 
  //     {remindType: remind5.remindType, frequency: +remind5.frequency}, 
  //   ], () => {
  //     success('更新成功')
  //   });
  // }
  onSubmit = () => {
    const {
      remind1,
      remind2,
      remind3
    } = this.state;
    this.props.actions.updateObjectivRemind([
      {remindType: remind1.remindType, frequency: remind1.frequency}, 
      {remindType: remind2.remindType, frequency: remind2.frequency}, 
      {remindType: remind3.remindType, frequency: remind3.frequency}, 
    ], () => {
      success('更新成功')
    });
  }
  render() {
    return (
      <div className={style['container-layout']} style={{width:'684px'}}>
        <div className={style['container-title']}>目标提醒设置</div>
        <div className={style['remind-item']}>
          <span className={style['remind-span']}>目标截止日提醒：</span>
          <div className={style['remind-area']}>提前 
            <input 
              value={+this.state.remind1.frequency}
              onChange={v => this.onFieldChange('remind1', v.target.value)}
            />
            天发送到期提醒邮件</div>
        </div>
        <div className={style['remind-item']}>
          <span className={style['remind-span']}>关键结果截止日提醒：</span>
          <div className={style['remind-area']}>提前 
            <input 
              value={+this.state.remind3.frequency}
              onChange={v => this.onFieldChange('remind3', v.target.value)}
            />
            天发送到期提醒邮件</div>
        </div>
        <div className={style['remind-item']}>
          <span className={style['remind-span']}>目标周期结束日提醒：</span>
          <div className={style['remind-area']}>提前 
            <input 
              value={+this.state.remind2.frequency}
              onChange={v => this.onFieldChange('remind2', v.target.value)}
            />
            天发送到期提醒邮件，提醒建立下一周期的目标</div>
        </div>


        {/* <div className={style['remind-item']}>
          <span className={style['remind-span']}>@通知所有人：</span>
          <Checkbox
            active={this.state.remind4.frequency == 1}
            onClick={() => this.onFieldChange('remind4', this.state.remind4.frequency == 1 ? 0 : 1)}
            label="在批注、赞赏内容处输入@允许给所有人发送邮件"
          />
        </div>
        <div className={style['remind-item']}>
          <span className={style['remind-span']}>@通知部门：</span>
          <Checkbox
            active={this.state.remind5.frequency == 1}
            onClick={() => this.onFieldChange('remind5', this.state.remind5.frequency == 1 ? 0 : 1)}
            label="在批注、赞赏内容处输入@允许给相关部门发送邮件"
          />
        </div> */}
        <div style={{height: '45px',marginTop:'60px'}}>
          <Button style={{ width: '130px',float:'right', height: '45px', marginTop: '15px',fontSize:'14px' }} blue label="更新" onClick={this.onSubmit} />
        </div>
      </div>
    );
  }
}

export default RemindSettings;
